:root{
  --size--2: -2px;
  --size--4: -4px;
  --size--8: -8px;
  --size--20: -20px;
  --size--26: -26px;
  --size--28: -28px;
  --size--30: -30px;
  --size--32: -32px;
  --size--36: -36px;
  --size--50: -50px;
  --size-2: 2px;
  --size-4: 4px;
  --size-6: 6px;
  --size-8: 8px;
  --size-10: 10px;
  --size-12: 12px;
  --size-14: 14px;
  --size-16: 16px;
  --size-18: 18px;
  --size-20: 20px;
  --size-22: 22px;
  --size-24: 24px;
  --size-26: 26px;
  --size-28: 28px;
  --size-30: 30px;
  --size-32: 32px;
  --size-34: 34px;
  --size-36: 36px;
  --size-38: 38px;
  --size-40: 40px;
  --size-42: 42px;
  --size-44: 44px;
  --size-48: 48px;
  --size-50: 50px;
  --size-52: 52px;
  --size-54: 54px;
  --size-56: 56px;
  --size-58: 58px;
  --size-60: 60px;
  --size-70: 70px;
  --size-72: 72px;
  --size-78: 78px;
  --size-80: 80px;
  --size-84: 84px;
  --size-90: 90px;
  --size-100: 100px;
  --size-106: 106px;
  --size-108: 108px;
  --size-120: 120px;
  --size-132: 132px;
  --size-136: 136px;
  --size-150: 150px;
  --size-156: 156px;
  --size-170: 170px;
  --size-190: 190px;
  --size-192: 192px;
  --size-230: 230px;
  --size-300: 300px;
  --size-330: 330px;
  --size-420: 420px;
  --size-450: 450px;
  --size-500: 500px;
  --size-510: 510px;
  --size-750: 750px;
  --matter-canvas-scale: 1;
}
.css-frame {
  padding: 0;
  margin: 0;
  border: none;
  width: 137px;
  height: 156px;
}
.css-frame-a {
  padding: 0;
  margin: 0;
  border: none;
  width: 137px;
  height: 156px;
  -webkit-animation: css-frame-animation 1s steps(var(--css-animate-steps)) infinite;
  animation: css-frame-animation 1s steps(var(--css-animate-steps)) infinite;
}
.van-dialog__message{
  line-height: 1.6;
}

@keyframes css-frame-animation { 0% { background-position: 0 0; } 100% { background-position: var(--css-animate-position-x) 0; } }


.van-toast__text{
  padding: var(--size-24);
  font-size: var(--size-26);
  line-height: 1.6;
}
.van-button{
  width: inherit;
  height: inherit;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  padding: var(--size-12) var(--size-18);
  width: 100%;
  display: block;
  line-height: normal;
}
.van-button::before{
  background-color: transparent;
}
.van-button:active::before{
  opacity: 0;
}
.van-field__right-icon, .van-cell__right-icon{
  color: #272636;
}

.van-button--default{
  border: none;
}
.van-cell {
  background-color: transparent;
}
.wb-text .van-cell{
  padding: 0;
}
.wb-dropdown .van-cell{
  padding: 0;
}
.wb-dropdown .van-field__control{
  color: inherit;
  text-align: inherit;
}
.van-field{
  height: inherit;
}
.van-cell, .van-button, .van-picker__title{
  font-size: var(--size-28);
  line-height: 1.6;
}
.van-ellipsis, .van-icon, .van-cell__title{
  font-size: var(--size-28);
}
.van-checkbox__icon, .van-radio__icon, .van-radio__label{
  font-size: inherit;
  color: inherit;
  font-weight: inherit;
  font-style: inherit;
}
.van-checkbox__icon .van-icon, .van-radio__icon .van-icon{
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
}
.van-dropdown-menu__title{
  line-height: inherit;
}
.van-picker__toolbar{
  margin-top: var(--size-12);
}
.van-field__left-icon{
  margin-right: var(--size-12);
}
.van-picker__cancel, .van-picker__confirm{
  padding: 0 var(--size-32);
  font-size: var(--size-28);
}
.van-cell{
  padding: var(--size-12) var(--size-24);
}
.van-field__body{
  height: 100%;
}
.van-cell__value--alone{
  text-align: inherit;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.van-dropdown-item__option{
  text-align: inherit;
}

.border-grey{
  border: var(--size-2) solid #dbdbde;;
}

.font-12{
  font-size: var(--size-12);
}
.font-bold{
  font-weight: bold;
}
.text-center{
  text-align: center;
}
.overflow-hidden{
  overflow: hidden;
}
.position-absolute{
  position: absolute;
}
/* ---------margin padding------------------ */
.margin-20{
  margin: var(--size-20);
}
.margin-top-10{
  margin-top: var(--size-10);
}
.margin-top-20{
  margin-top: var(--size-20);
}
.margin-top-30{
  margin-top: var(--size-30);
}
.margin-top-40{
  margin-top: var(--size-40);
}
.margin-top-50{
  margin-top: var(--size-50);
}
.margin-top-4{
  margin-top: var(--size-4);
}
.margin-top-8{
  margin-top: var(--size-8);
}
.margin-top-16{
  margin-top: var(--size-16);
}
.margin-top-24{
  margin-top: var(--size-24);
}
.margin-right-8{
  margin-right: var(--size-8);
}
.margin-left-10{
  margin-left: var(--size-10);
}
.margin-bottom-8{
  margin-bottom: var(--size-8);
}
.margin-bottom-12{
  margin-bottom: var(--size-12);
}
.margin-0-8{
  margin: 0 var(--size-8);
}
.margin-12-0{
  margin: var(--size-12) 0;
}
.padding-4{
  padding: var(--size-4);
}
.padding-8{
  padding: var(--size-8);
}
.padding-8-16{
  padding: var(--size-8) var(--size-16);
}
.padding-0-4{
  padding: 0px var(--size-4);
}
.padding-0-8{
  padding: 0px var(--size-8);
}
.padding-0-12{
  padding: 0px var(--size-12);
}
.padding-left-32{
  padding-left: var(--size-32);
}
.padding-left-16{
  padding-left: var(--size-16);
}
.margin-left-8{
  margin-left: var(--size-8); 
}
.margin-right-12{
  margin-right: var(--size-12);
}
.margin-right-32{
  margin-right: var(--size-32);
}
.margin-left-70{
  margin-right: var(--size-70);
}
/* ------------position------------- */
.bottom-12{
  bottom: var(--size-12);
}
.right-20{
  right: var(--size-20);
}
.width-26{
  width: var(--size-26);
}
.height-26{
  height: var(--size-26);
}
.wid-80-percent{
  width: 80%;
}
/* ------------border-radius------------- */
.border-radius-12{
  border-radius: var(--size-12);
}
.border-radius-60{
  border-radius: var(--size-60);
}
.font-size-24{
  font-size: var(--size-24);
}
/* ------------min max------------- */
.min-width-300{
  max-height: var(--size-300);
}

/* ------------flex------------- */
.flex-row-con {
  display: flex;
  flex-direction: row;
}
.flex-col-con {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.need-cls {
  position: absolute;
  right: var(--size--28);
  line-height: 1;
  color: #f8633b;
  margin-left: var(--size-20);
}
.van-dialog{
  width: 80%;
}
@media only screen and (min-width: 1200px) {
  .van-dialog {
    width: 300px;
  }
}

.triangle{
  display: inline-block;
  width: 0;
  height: 0;
  border-top: var(--size-16) solid transparent;
  border-right: var(--size-30) solid red;
  border-bottom: var(--size-16) solid transparent;
  margin-right: var(--size-10);
}

.shadow {
  -webkit-filter: drop-shadow(4px 4px 4px green);
  filter: drop-shadow(4px 4px 4px green);
}

.margin-top-60{
  margin-top: var(--size-60);
}
.position-bottom-60 {
 bottom: var(--size-60);
}
.bgcolor{
  background-color:#fe8923;
  color: #fff;
}
//pops
.pops-con {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  z-index: 1000;
}
.pop-con {
  width: inherit;
  height: inherit;
}
.pop-con .btn-close {
  position: absolute;
  right: var(--size-20);
  top: var(--size-20);
  font-size: var(--size-40);
  color: #ffffff;
  z-index: 100;
}
//share
.share img {
  width: var(--size-330);
  height: var(--size-420);
}
//swiper
@keyframes tipmove {
  0% {
    bottom: var(--size-10);
    opacity: 0;
  }
  50% {
    bottom: var(--size-16);
    opacity: 1;
  }
  100% {
    bottom: var(--size-20);
    opacity: 0;
  }
}
@keyframes start {
  0%,
  30% {
    opacity: 0;
    transform: translate(0, var(--size-10));
  }
  60% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(0, var(--size--8));
  }
}
.ani-swipe {
  position: fixed;
  z-index: 999;
  animation: start 1.5s infinite ease-in-out;
  left: 46%;
  bottom: 2%;
  width: var(--size-48);
  height: var(--size-36);
}
/* -------pops success fail------ */
.pop-container-con{
  position: absolute;
  width: var(--size-750);
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%);

  .info-con{
    position: absolute;
    width: 80%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .btn-con{
    position: absolute;
    bottom: var(--size-40);
    left: 50%;
    transform: translateX(-50%);
  }
  h3{
    font-size: var(--size-40);
    text-align: center;
    margin: var(--size-24) 0;
  }
  img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.success-con {
  .content{
    color: #43475c;
    font-size: var(--size-36);
    text-align: center;
    min-height: var(--size-230);
    line-height: 1.5;
  }
  h3{
    color: #f8633b;
  }
  .btn{
    color: #ec6946;
    font-size: var(--size-36);
    text-align: center;
    background-color: #fff355;
    padding: var(--size-20) var(--size-60);
  }
}

.fail-con{
  color: #9a9ea3;
  font-size: var(--size-48);
  text-align: center;

  .content{
    color: #43475c;
    font-size: var(--size-36);
    text-align: center;
    min-height: var(--size-230);
    line-height: 1.5;
  }
  h3{
    font-size: inherit;
  }
  .btn-con i{
    color: #fff;
    font-size: var(--size-60);
  }
  .btn-con{
    bottom: -20%;
  }
}
.border-bottom-1px::after{
  border: none;
}

.van-loading {
  position: fixed;
  font-size: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  // background-color: rgba(0, 0, 0, 0.5);

  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 100vh;
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  height: var(--size-72);
  width: var(--size-72);
  margin-left: var(--size--36);
  margin-top: var(--size--36);
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
  border: var(--size-4) solid #ddd;
  border-top: var(--size-4) solid #42a5f5;
  border-radius: 50%;
}

@-webkit-keyframes spin {
  to {
    border-top-color: #ec407a;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  to {
    border-top-color: #ec407a;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}



.gradient-gray {
  background-color: #777;
  background-image: radial-gradient(circle at 47% 14%, rgba(205, 205, 205,0.04) 0%, rgba(205, 205, 205,0.04) 43%,transparent 43%, transparent 100%),radial-gradient(circle at 35% 12%, rgba(215, 215, 215,0.04) 0%, rgba(215, 215, 215,0.04) 4%,transparent 4%, transparent 100%),radial-gradient(circle at 1% 35%, rgba(24, 24, 24,0.04) 0%, rgba(24, 24, 24,0.04) 37%,transparent 37%, transparent 100%),radial-gradient(circle at 21% 1%, rgba(0, 0, 0,0.04) 0%, rgba(0, 0, 0,0.04) 26%,transparent 26%, transparent 100%),radial-gradient(circle at 23% 82%, rgba(249, 249, 249,0.04) 0%, rgba(249, 249, 249,0.04) 60%,transparent 60%, transparent 100%),radial-gradient(circle at 11% 54%, rgba(251, 251, 251,0.04) 0%, rgba(251, 251, 251,0.04) 23%,transparent 23%, transparent 100%),radial-gradient(circle at 69% 68%, rgba(234, 234, 234,0.04) 0%, rgba(234, 234, 234,0.04) 10%,transparent 10%, transparent 100%),-webkit-gradient(linear, left top, right top, from(#777),to(#606060));
  background-image: radial-gradient(circle at 47% 14%, rgba(205, 205, 205,0.04) 0%, rgba(205, 205, 205,0.04) 43%,transparent 43%, transparent 100%),radial-gradient(circle at 35% 12%, rgba(215, 215, 215,0.04) 0%, rgba(215, 215, 215,0.04) 4%,transparent 4%, transparent 100%),radial-gradient(circle at 1% 35%, rgba(24, 24, 24,0.04) 0%, rgba(24, 24, 24,0.04) 37%,transparent 37%, transparent 100%),radial-gradient(circle at 21% 1%, rgba(0, 0, 0,0.04) 0%, rgba(0, 0, 0,0.04) 26%,transparent 26%, transparent 100%),radial-gradient(circle at 23% 82%, rgba(249, 249, 249,0.04) 0%, rgba(249, 249, 249,0.04) 60%,transparent 60%, transparent 100%),radial-gradient(circle at 11% 54%, rgba(251, 251, 251,0.04) 0%, rgba(251, 251, 251,0.04) 23%,transparent 23%, transparent 100%),radial-gradient(circle at 69% 68%, rgba(234, 234, 234,0.04) 0%, rgba(234, 234, 234,0.04) 10%,transparent 10%, transparent 100%),linear-gradient(90deg, #777,#606060);
}
.gradient-blue {
  background-color: #2c7ad2;
  background-image: radial-gradient(circle at 47% 14%, rgba(205, 205, 205,0.04) 0%, rgba(205, 205, 205,0.04) 43%,transparent 43%, transparent 100%),radial-gradient(circle at 35% 12%, rgba(215, 215, 215,0.04) 0%, rgba(215, 215, 215,0.04) 4%,transparent 4%, transparent 100%),radial-gradient(circle at 1% 35%, rgba(24, 24, 24,0.04) 0%, rgba(24, 24, 24,0.04) 37%,transparent 37%, transparent 100%),radial-gradient(circle at 21% 1%, rgba(0, 0, 0,0.04) 0%, rgba(0, 0, 0,0.04) 26%,transparent 26%, transparent 100%),radial-gradient(circle at 23% 82%, rgba(249, 249, 249,0.04) 0%, rgba(249, 249, 249,0.04) 60%,transparent 60%, transparent 100%),radial-gradient(circle at 11% 54%, rgba(251, 251, 251,0.04) 0%, rgba(251, 251, 251,0.04) 23%,transparent 23%, transparent 100%),radial-gradient(circle at 69% 68%, rgba(234, 234, 234,0.04) 0%, rgba(234, 234, 234,0.04) 10%,transparent 10%, transparent 100%),-webkit-gradient(linear, left top, right top, from(#2c7ad2),to(#1568c6));
  background-image: radial-gradient(circle at 47% 14%, rgba(205, 205, 205,0.04) 0%, rgba(205, 205, 205,0.04) 43%,transparent 43%, transparent 100%),radial-gradient(circle at 35% 12%, rgba(215, 215, 215,0.04) 0%, rgba(215, 215, 215,0.04) 4%,transparent 4%, transparent 100%),radial-gradient(circle at 1% 35%, rgba(24, 24, 24,0.04) 0%, rgba(24, 24, 24,0.04) 37%,transparent 37%, transparent 100%),radial-gradient(circle at 21% 1%, rgba(0, 0, 0,0.04) 0%, rgba(0, 0, 0,0.04) 26%,transparent 26%, transparent 100%),radial-gradient(circle at 23% 82%, rgba(249, 249, 249,0.04) 0%, rgba(249, 249, 249,0.04) 60%,transparent 60%, transparent 100%),radial-gradient(circle at 11% 54%, rgba(251, 251, 251,0.04) 0%, rgba(251, 251, 251,0.04) 23%,transparent 23%, transparent 100%),radial-gradient(circle at 69% 68%, rgba(234, 234, 234,0.04) 0%, rgba(234, 234, 234,0.04) 10%,transparent 10%, transparent 100%),linear-gradient(90deg, #2c7ad2,#1568c6);
}
.gradient-orange {
  background-color: #e77614;
  background-image: radial-gradient(circle at 46% 40%, rgba(228, 228, 228,0.06) 0%, rgba(228, 228, 228,0.06) 13%,transparent 13%, transparent 100%),radial-gradient(circle at 11% 41%, rgba(198, 198, 198,0.06) 0%, rgba(198, 198, 198,0.06) 19%,transparent 19%, transparent 100%),radial-gradient(circle at 52% 23%, rgba(14, 14, 14,0.06) 0%, rgba(14, 14, 14,0.06) 69%,transparent 69%, transparent 100%),radial-gradient(circle at 13% 85%, rgba(148, 148, 148,0.06) 0%, rgba(148, 148, 148,0.06) 44%,transparent 44%, transparent 100%),radial-gradient(circle at 57% 74%, rgba(232, 232, 232,0.06) 0%, rgba(232, 232, 232,0.06) 21%,transparent 21%, transparent 100%),radial-gradient(circle at 59% 54%, rgba(39, 39, 39,0.06) 0%, rgba(39, 39, 39,0.06) 49%,transparent 49%, transparent 100%),radial-gradient(circle at 98% 38%, rgba(157, 157, 157,0.06) 0%, rgba(157, 157, 157,0.06) 24%,transparent 24%, transparent 100%),radial-gradient(circle at 8% 6%, rgba(60, 60, 60,0.06) 0%, rgba(60, 60, 60,0.06) 12%,transparent 12%, transparent 100%),-webkit-gradient(linear, left top, right top, from(#ff7600), to(#ff7600));
  background-image: radial-gradient(circle at 46% 40%, rgba(228, 228, 228,0.06) 0%, rgba(228, 228, 228,0.06) 13%,transparent 13%, transparent 100%),radial-gradient(circle at 11% 41%, rgba(198, 198, 198,0.06) 0%, rgba(198, 198, 198,0.06) 19%,transparent 19%, transparent 100%),radial-gradient(circle at 52% 23%, rgba(14, 14, 14,0.06) 0%, rgba(14, 14, 14,0.06) 69%,transparent 69%, transparent 100%),radial-gradient(circle at 13% 85%, rgba(148, 148, 148,0.06) 0%, rgba(148, 148, 148,0.06) 44%,transparent 44%, transparent 100%),radial-gradient(circle at 57% 74%, rgba(232, 232, 232,0.06) 0%, rgba(232, 232, 232,0.06) 21%,transparent 21%, transparent 100%),radial-gradient(circle at 59% 54%, rgba(39, 39, 39,0.06) 0%, rgba(39, 39, 39,0.06) 49%,transparent 49%, transparent 100%),radial-gradient(circle at 98% 38%, rgba(157, 157, 157,0.06) 0%, rgba(157, 157, 157,0.06) 24%,transparent 24%, transparent 100%),radial-gradient(circle at 8% 6%, rgba(60, 60, 60,0.06) 0%, rgba(60, 60, 60,0.06) 12%,transparent 12%, transparent 100%),linear-gradient(90deg, #ff7600, #ff7600);
}

.gradient-red {
  background-color: #c82736;
  background-image: radial-gradient(circle at 19% 90%, rgba(190, 190, 190,0.04) 0%, rgba(190, 190, 190,0.04) 17%,transparent 17%, transparent 100%),radial-gradient(circle at 73% 2%, rgba(78, 78, 78,0.04) 0%, rgba(78, 78, 78,0.04) 94%,transparent 94%, transparent 100%),radial-gradient(circle at 45% 2%, rgba(18, 18, 18,0.04) 0%, rgba(18, 18, 18,0.04) 55%,transparent 55%, transparent 100%),radial-gradient(circle at 76% 60%, rgba(110, 110, 110,0.04) 0%, rgba(110, 110, 110,0.04) 34%,transparent 34%, transparent 100%),radial-gradient(circle at 68% 56%, rgba(246, 246, 246,0.04) 0%, rgba(246, 246, 246,0.04) 16%,transparent 16%, transparent 100%),radial-gradient(circle at 71% 42%, rgba(156, 156, 156,0.04) 0%, rgba(156, 156, 156,0.04) 47%,transparent 47%, transparent 100%),radial-gradient(circle at 46% 82%, rgba(247, 247, 247,0.04) 0%, rgba(247, 247, 247,0.04) 39%,transparent 39%, transparent 100%),radial-gradient(circle at 50% 47%, rgba(209, 209, 209,0.04) 0%, rgba(209, 209, 209,0.04) 45%,transparent 45%, transparent 100%),-webkit-gradient(linear, left top, right top, from(#e53949),to(#cc2232));
  background-image: radial-gradient(circle at 19% 90%, rgba(190, 190, 190,0.04) 0%, rgba(190, 190, 190,0.04) 17%,transparent 17%, transparent 100%),radial-gradient(circle at 73% 2%, rgba(78, 78, 78,0.04) 0%, rgba(78, 78, 78,0.04) 94%,transparent 94%, transparent 100%),radial-gradient(circle at 45% 2%, rgba(18, 18, 18,0.04) 0%, rgba(18, 18, 18,0.04) 55%,transparent 55%, transparent 100%),radial-gradient(circle at 76% 60%, rgba(110, 110, 110,0.04) 0%, rgba(110, 110, 110,0.04) 34%,transparent 34%, transparent 100%),radial-gradient(circle at 68% 56%, rgba(246, 246, 246,0.04) 0%, rgba(246, 246, 246,0.04) 16%,transparent 16%, transparent 100%),radial-gradient(circle at 71% 42%, rgba(156, 156, 156,0.04) 0%, rgba(156, 156, 156,0.04) 47%,transparent 47%, transparent 100%),radial-gradient(circle at 46% 82%, rgba(247, 247, 247,0.04) 0%, rgba(247, 247, 247,0.04) 39%,transparent 39%, transparent 100%),radial-gradient(circle at 50% 47%, rgba(209, 209, 209,0.04) 0%, rgba(209, 209, 209,0.04) 45%,transparent 45%, transparent 100%),linear-gradient(90deg, #e53949,#cc2232);
}

.gradient-purple {
  background-color: #8d3dae;
  background-image: radial-gradient(circle at 47% 14%, rgba(205, 205, 205,0.04) 0%, rgba(205, 205, 205,0.04) 43%,transparent 43%, transparent 100%),radial-gradient(circle at 35% 12%, rgba(215, 215, 215,0.04) 0%, rgba(215, 215, 215,0.04) 4%,transparent 4%, transparent 100%),radial-gradient(circle at 1% 35%, rgba(24, 24, 24,0.04) 0%, rgba(24, 24, 24,0.04) 37%,transparent 37%, transparent 100%),radial-gradient(circle at 21% 1%, rgba(0, 0, 0,0.04) 0%, rgba(0, 0, 0,0.04) 26%,transparent 26%, transparent 100%),radial-gradient(circle at 23% 82%, rgba(249, 249, 249,0.04) 0%, rgba(249, 249, 249,0.04) 60%,transparent 60%, transparent 100%),radial-gradient(circle at 11% 54%, rgba(251, 251, 251,0.04) 0%, rgba(251, 251, 251,0.04) 23%,transparent 23%, transparent 100%),radial-gradient(circle at 69% 68%, rgba(234, 234, 234,0.04) 0%, rgba(234, 234, 234,0.04) 10%,transparent 10%, transparent 100%),-webkit-gradient(linear, left top, right top, from(#8d3dae),to(#8d3dae));
  background-image: radial-gradient(circle at 47% 14%, rgba(205, 205, 205,0.04) 0%, rgba(205, 205, 205,0.04) 43%,transparent 43%, transparent 100%),radial-gradient(circle at 35% 12%, rgba(215, 215, 215,0.04) 0%, rgba(215, 215, 215,0.04) 4%,transparent 4%, transparent 100%),radial-gradient(circle at 1% 35%, rgba(24, 24, 24,0.04) 0%, rgba(24, 24, 24,0.04) 37%,transparent 37%, transparent 100%),radial-gradient(circle at 21% 1%, rgba(0, 0, 0,0.04) 0%, rgba(0, 0, 0,0.04) 26%,transparent 26%, transparent 100%),radial-gradient(circle at 23% 82%, rgba(249, 249, 249,0.04) 0%, rgba(249, 249, 249,0.04) 60%,transparent 60%, transparent 100%),radial-gradient(circle at 11% 54%, rgba(251, 251, 251,0.04) 0%, rgba(251, 251, 251,0.04) 23%,transparent 23%, transparent 100%),radial-gradient(circle at 69% 68%, rgba(234, 234, 234,0.04) 0%, rgba(234, 234, 234,0.04) 10%,transparent 10%, transparent 100%),linear-gradient(90deg, #8d3dae,#8d3dae);
}
.gradient-green {
  background-color: #28a92b;
  background-image: radial-gradient(circle at 46% 40%, rgba(228, 228, 228,0.06) 0%, rgba(228, 228, 228,0.06) 13%,transparent 13%, transparent 100%),radial-gradient(circle at 11% 41%, rgba(198, 198, 198,0.06) 0%, rgba(198, 198, 198,0.06) 19%,transparent 19%, transparent 100%),radial-gradient(circle at 52% 23%, rgba(14, 14, 14,0.06) 0%, rgba(14, 14, 14,0.06) 69%,transparent 69%, transparent 100%),radial-gradient(circle at 13% 85%, rgba(148, 148, 148,0.06) 0%, rgba(148, 148, 148,0.06) 44%,transparent 44%, transparent 100%),radial-gradient(circle at 57% 74%, rgba(232, 232, 232,0.06) 0%, rgba(232, 232, 232,0.06) 21%,transparent 21%, transparent 100%),radial-gradient(circle at 59% 54%, rgba(39, 39, 39,0.06) 0%, rgba(39, 39, 39,0.06) 49%,transparent 49%, transparent 100%),radial-gradient(circle at 98% 38%, rgba(157, 157, 157,0.06) 0%, rgba(157, 157, 157,0.06) 24%,transparent 24%, transparent 100%),radial-gradient(circle at 8% 6%, rgba(60, 60, 60,0.06) 0%, rgba(60, 60, 60,0.06) 12%,transparent 12%, transparent 100%),-webkit-gradient(linear, left top, right top, from(#28a92b), to(#10a614));
  background-image: radial-gradient(circle at 46% 40%, rgba(228, 228, 228,0.06) 0%, rgba(228, 228, 228,0.06) 13%,transparent 13%, transparent 100%),radial-gradient(circle at 11% 41%, rgba(198, 198, 198,0.06) 0%, rgba(198, 198, 198,0.06) 19%,transparent 19%, transparent 100%),radial-gradient(circle at 52% 23%, rgba(14, 14, 14,0.06) 0%, rgba(14, 14, 14,0.06) 69%,transparent 69%, transparent 100%),radial-gradient(circle at 13% 85%, rgba(148, 148, 148,0.06) 0%, rgba(148, 148, 148,0.06) 44%,transparent 44%, transparent 100%),radial-gradient(circle at 57% 74%, rgba(232, 232, 232,0.06) 0%, rgba(232, 232, 232,0.06) 21%,transparent 21%, transparent 100%),radial-gradient(circle at 59% 54%, rgba(39, 39, 39,0.06) 0%, rgba(39, 39, 39,0.06) 49%,transparent 49%, transparent 100%),radial-gradient(circle at 98% 38%, rgba(157, 157, 157,0.06) 0%, rgba(157, 157, 157,0.06) 24%,transparent 24%, transparent 100%),radial-gradient(circle at 8% 6%, rgba(60, 60, 60,0.06) 0%, rgba(60, 60, 60,0.06) 12%,transparent 12%, transparent 100%),linear-gradient(90deg, #28a92b, #10a614);
}

.fullscreen-panel {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  font-weight: 600;
  font-size: 1.5em;
  text-align: center;
  color: white;
  position: relative;
  box-sizing: border-box;
  padding: var(--size-10);
}


.shake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(var(--size-2), 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(var(--size-2), 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(var(--size--4), 0, 0);
  }

  40%, 60% {
    transform: translate3d(var(--size-4), 0, 0);
  }
}

.group-component-con canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(var(--matter-canvas-scale));
  transform-origin: left top;
}